import React from "react";

import './home_left.css'
import PubSub from "pubsub-js";

import { Table, message } from 'antd'
import axios from "axios";


const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    render: (text,record,index) => `${index+1}`
  },
  {
    title: '缩略图',
    dataIndex: 'image_file',
    key: 'image_file',
    render: (url) => <img height={85} src={url}/>
  },
  {
    title: '名称',
    dataIndex: 'image_name',
    key: 'image_name',
  },
];


export default class Home_left extends React.Component{
    // 构造函数
    constructor(props) {
      super(props);
      this.state = {
        index: "",
        img_url: "",
        dataSource: [],
        uploadState: "",
        total: 0,   // 图片总数
        pageNum: 1, // 当前页码
        pageSize: 6 // 每页显示数量
      };
    }

    // 向后端查询图片函数
    queryImage(page_number) {
      let data = { pageNum: page_number, message:'queryimg_six' }
      let url = '/registrationapi/queryimg'
      axios.post(url, data, {headers: {'Content-Type': 'application/json'}}
        ).then(res=>{
          if(res.status === 200 && res.data.code === 0){
            this.setState({
              dataSource:res.data.img_list,
              total:res.data.total,
            })
          } else{
            console.log(res.data.msg)
            message.error(res.data.msg)
          }
      })
    }

    // 点击页码的回调函数
    changePage(current){
      //current参数表示是点击当前的页码，
      this.queryImage(current)
    }


    componentDidMount() {
      PubSub.subscribe('sendUploadParam', (name, uploadState) => {
        this.queryImage(this.state.pageNum)
      })
      this.queryImage(this.state.pageNum)
    }

    // 设置行的类函数
    rowClassNameFun = (record, index) => {
        if (index === this.state.index)
            return 'mySelfClassName'
    }
    // 更新点击的行数以及图像地址
    updateRow = (record, index) => {
        this.setState({
            index: index,
            img_url: record.image_file
        })
        // 发送给兄弟组件图片的地址
        PubSub.publish("sendImageUrlParam", record);

        let data = { image_file: record.image_file }
        let url = '/registrationapi/queryextraimage'
        axios.post(url, data, {headers: {'Content-Type': 'application/json'}}
          ).then(res=>{
            if(res.status === 200 && res.data.code === 0){
              if (res.data.extra_image.point_image_base64 === '') {
                let order_data = { record: record, orderNumber: 1};
                PubSub.publish("sendOrderNumber1", order_data);
              } else if (res.data.extra_image.point_image_base64 !== '' && res.data.extra_image.outlines_image_base64 === '') {
                let order_data = { record: record, orderNumber: 2};
                PubSub.publish("sendOrderNumber2", order_data);
              }
            } else{
              message.error(res.data.msg)
            }
        })

        let value = 1;
        PubSub.publish("sendValue", value);
    }

    render() {
      // 分页参数
      const paginationProps = {
        showSizeChanger: false,//设置每页显示数据条数
        showQuickJumper: false,
        position: ['bottomCenter'],
        showTotal: () => `共${this.state.total}条`,
        pageSize: this.state.pageSize,
        total: this.state.total,  //数据的总的条数
        onChange: (current) => this.changePage(current), //点击当前页码
      }
        return (
          <div className="home_left">
            <Table
              dataSource={this.state.dataSource}
              columns={columns}
              pagination={ paginationProps }
              rowClassName={this.rowClassNameFun}
              onRow={ (record, index) => {
                return {
                  onClick: event => { this.updateRow(record, index) }, // 点击行
                };
              }}
            />;
          </div>
        )
    }
}